<template>
    <section :class="chartClass">
        <el-row>
            <el-col :span="24">
                <sy-dataPicker v-model="searchDate" style="margin: 0px 10px 20px 250px"></sy-dataPicker>
                <!--<el-select v-model="type" placeholder="请选择" style="width: 160px">-->
                    <!--<el-option label="电话量" :value="0"></el-option>-->
                    <!--<el-option label="新增意向客户数" :value="1"></el-option>-->
                    <!--<el-option label="已发合同客户数" :value="2"></el-option>-->
                    <!--<el-option label="实际签合同客户数" :value="3"></el-option>-->
                <!--</el-select>-->
                <el-button @click="search" type="primary" size="small">查询</el-button>
            </el-col>
            <el-col :span="24">
                <div id="chartColumn0" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="24">
                <div id="chartColumn1" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="24">
                <div id="chartColumn2" style="width:100%; height:400px;"></div>
            </el-col>
            <el-col :span="24">
                <div id="chartColumn3" style="width:100%; height:400px;"></div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import echarts from 'echarts'
    import util from '../../common/util'
    export default{
        data (){
            //默认本月时间
            let start = null
            let end =  null
            return {
                type:1,
                chartColumn:null,
                chartLine:null,
                searchDate:[start,end],
                reportData:[]
            }
        },
        computed:{
             dataUrl(){
                 if(this.type==1){
                     return "server/report/Report.ashx?cmd=GetAllReport"
                 }else if(this.type==2){
                     return "server/report/Report.ashx?cmd=GetTeamReport"
                 }else if(this.type==3){
                     return "server/report/Report.ashx?cmd=GetTopReport"
                 }
             },
            chartClass(){
                 if(this.type==1){
                     return "chart"
                 }else{
                     return "chart2"
                 }
             }
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                this.type = this.$router.currentRoute.query.type
                this.search()
            }
        },
        methods:{
            search(){
                let where = "";
                let value = this.searchDate;
                if(value && value[0] && value[1]) {
                    let bDate = util.date.format(value[0], 'yyyy-MM-dd')
                    let eDate = util.date.format(value[1], 'yyyy-MM-dd 23:59:59')
                    where = "FCreateDate>='" + bDate + "' and FCreateDate<'" + eDate + "'"
                }
                let url = "server/report/Report.ashx?cmd=GetTeamReport"
                util.get(this.dataUrl,{where:where},null,result=>{
                    this.reportData = result.data
                    this.mountedChart()
                })
            },
            xAxis(key){
                //拷贝数组
                let copyArr = this.reportData.slice()
                //排序数组
                copyArr.sort((a,b)=>{
                    return b[key] - a[key]
                })
                let result = []
                for(let item of copyArr){
                    result.push(item.UserName)
                }
                return result;
            },
            yAxis(key){
                //拷贝数组
                let copyArr = this.reportData.slice()
                //排序数组
                copyArr.sort((a,b)=>{
                   return b[key] - a[key]
                })
                let result = []
                for(let item of copyArr){
                    result.push(item[key])
                }
                return result;
            },
            mountedChart(){
                var _this=this;
                //基于准备好的dom，初始化echarts实例
                this.chartColumn0 = echarts.init(document.getElementById('chartColumn0'));
                this.chartColumn1 = echarts.init(document.getElementById('chartColumn1'));
                this.chartColumn2 = echarts.init(document.getElementById('chartColumn2'));
                this.chartColumn3 = echarts.init(document.getElementById('chartColumn3'));

                this.chartColumn0.setOption({
                    title: { text: '电话量排名' },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis("Count0")
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.yAxis("Count0")
                    }]
                });

                this.chartColumn1.setOption({
                    title: { text: '新增意向客户数排名' },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis("Count1")
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.yAxis("Count1")
                    }]
                });

                this.chartColumn2.setOption({
                    title: { text: '已发合同客户数排名' },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis("Count2")
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.yAxis("Count2")
                    }]
                });

                this.chartColumn3.setOption({
                    title: { text: '实际签合同客户数排名' },
                    tooltip: {},
                    xAxis: {
                        data: this.xAxis("Count3")
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: this.yAxis("Count3")
                    }]
                });
            }
        },
        mounted(){
           this.search()
        }
    }
</script>

<style scoped>
    .chart {
        width: 150%;
        float: left;
    }

    .chart2 {
        width: 70%;
        float: left;
    }
    /*.chart div {
        height: 400px;
        float: left;
    }*/

    .el-col {
        padding: 30px 20px;
    }
</style>